<template>
	<view class="content">

		<z-paging ref="paging" @query="getList" v-model="list" :loading-more-enabled="false" :hide-empty-view="true">
			<!-- 头部 -->
			<view class="headerBox">
				<view class="leftBox" @click="goUserInfo">
					<image src="/static/home/one.png" class="oneImage" />
					<view class="hello">hi , NASY</view>
				</view>
				<view class="rightBox">
					<view class="lang" @click="changelanguage">
						<!-- @click="ConnectYourWallet" -->
						<p class="address">
							{{ publicKey ? formatPublicKey(publicKey) : "连接钱包" }}
						</p>
						<view class="addressBox" v-if="true">
							<view class="address1"> | LA</view>
							<image src="/static/home/three.png" class="twoImage" @click="togglePopup" />
							<view v-if="popupVisible" class="popup" @click="whitePopup">
								<view class="popup-content">
									<view class="china">中文</view>
									<view class="en">English</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 公告 -->
			<view class="swystemBox">
				<view class="swystem" @click="showModel = true">
					<image src="../../static/home/two.png" class="threeImage" />
					<view class="swystem1">{{ $t('systemannouncement') }}</view>
					<view class="" style="color: white;margin-left: 20rpx;">
						{{ $t('OfficiallylaunchedonMay1st') }}
					</view>
				</view>
			</view>
			<!-- swiper -->
			<view class="boxOne" style="margin: 30rpx;">
				<u-swiper :list="bannerList" height="187"></u-swiper>
			</view>
			<!-- 资产 -->
			<view class="myBox">
				<view class="my">{{ $t('myassets') }}</view>
				<image src="../../static/home/eye1.png" @click="hideMony" class="eyes" />
			</view>
			<!-- 资产内容 -->
			<view class="boxTwo">
				<view class="zeroBox">
					<view class="zero" v-if="hideMonyShow">{{ Number(solLimit).toFixed(4) }} NASY</view>
					<view class="zero" v-else style="width: 286rpx;">******</view>
				</view>
			</view>
			<!-- 持币标题 -->
			<view class="boxThree">
				<view class="Rewards">{{ $t('Cashholdingreward') }}</view>
				<view class="Rewards1" @click="rewardRecordHandle">{{ $t('Rewardrecord') }} ></view>
			</view>
			<!-- 持币内容 -->
			<view class="boxFour">
				<view class="fourLeft">
					<view class="fourOne">{{ $t('ranking') }}</view>
					<view class="fourTwo">{{ $t('totalreward') }}</view>
					<view class="fourThree">{{ $t('hasobtained') }}</view>
					<view class="fourPut">{{ $t('tobereleased') }}</view>
					<view class="fourFive">{{ $t('thelast') }}</view>
				</view>
				<view class="" style="height: 22rpx;"></view>
				<view class="fourRight">
					<!-- 排名 -->
					<view class="fourOne">
						<image v-if="holdRewards.rank == 1" src="/static/my/one.png" alt="" class="" />
						<image v-if="holdRewards.rank == 2" src="/static/my/two.png" alt="" class="" />
						<image v-if="holdRewards.rank == 3" src="/static/my/three.png" alt="" class="" />
						<image v-if="holdRewards.rank == 4" src="/static/my/four.png" alt="" class="" />
						<image v-if="holdRewards.rank == 5" src="/static/my/five.png" alt="" class="" />
						<image v-if="holdRewards.rank == 6" src="/static/my/six.png" alt="" class="" />
						<image v-if="holdRewards.rank == 7" src="/static/my/seven.png" alt="" class="" />
						<image v-if="holdRewards.rank == 8" src="/static/my/eight.png" alt="" class="" />
						<image v-if="holdRewards.rank == 9" src="/static/my/nine.png" alt="" class="" />
						<image v-if="holdRewards.rank == 10" src="/static/my/ten.png" alt="" class="" />
						<text v-if="holdRewards.rank == '0'" class="fourOne" style="text-align: center;font-size: 12px;">
							无
						</text>
					</view>
					<!-- <view v-if="holdRewards.rank == '0'" class="fourOne" style="text-align: center;font-size: 12px;">
						无
					</view> -->
					<!-- 总奖励 -->
					<view class="fourTwo">
						<text class="" v-if="holdRewards.totalHolderReward == ''">---</text>
						<!--  -->
						<text class="" v-else>
							{{ Number(holdRewards.totalHolderReward).toFixed() }}
						</text>
					</view>
					<!-- 已经获得 -->
					<view class="fourThree">
						<text class="" v-if="holdRewards.earnedRewards == ''">---</text>
						<!--  -->
						<text class="" v-else>
							{{ Number(holdRewards.earnedRewards).toFixed() }}
						</text>
						<!-- 
					{{ isString(holdRewards.earnedRewards) ? holdRewards.earnedRewards : Number(
						holdRewards.earnedRewards).toFixed(5) }} -->
					</view>
					<!-- 待释放 -->
					<view class="fourPut">
						<text class="" v-if="holdRewards.pendingRewards == ''">---</text>
						<!--  -->
						<text class="" v-else>
							{{ Number(holdRewards.pendingRewards).toFixed() }}
						</text>
					</view>
					<!-- 距离上一名 -->
					<div style="display: flex;align-items: center;">
						<div class="progress-container" :style="customStyles">
							<div class="progress-bar" id="progressBar">
								<!-- <span class="progress-text" id="progressText">5%</span> -->
							</div>
						</div>
					</div>

				</view>
			</view>
			<!-- 挖矿标题 -->
			<view class="boxFive">
				<view class="force">{{ $t('Computingpowermining') }}</view>
				<view class="force1" @click="releaseRecord">{{ $t('Releaserecord') }} ></view>
			</view>
			<!-- 挖矿内容 -->
			<view class="boxSix">
				<view class="earningsBox">
					<view class="flex" style="display: flex;align-items: end;">
						<view class="earnings"> {{ $t('miningrevenue') }}</view>
						<view class="" v-if="current_stage_number == 2"
							style="font-size: 14px; line-height: 14px;border: 1px solid;border-radius: 25rpx;padding: 5px;margin-left: 10px;color: white;">
							{{ $t('Mining') }}
						</view>
						<view class="" v-else
							style="font-size: 14px; line-height: 14px;border: 1px solid;border-radius: 25rpx;padding: 5px;margin-left: 10px;color: white;">
							未挖矿
						</view>
					</view>
					<image src="/static/home/six.png" class="whitePic" />
				</view>
				<view class="dayBox">
					<view class="day">
						<view class="math1">{{
							earnedRewards == '----' ? '----' : Number(earnedRewards).toFixed(4)
						}}</view>
						<view class="math2"> {{ $t('Todaysearnings') }}</view>
					</view>
					<view class="day2">
						<view class="math3">
							{{ pendingRewards == '----' ? '----' : Number(pendingRewards).toFixed(4) }}
						</view>
						<view class="math4"> {{ $t('tobereleased') }}</view>
					</view>
				</view>
				<view class="blueBox" v-if="remaining_time != null">
					<view class="oneDay">
						<view class="time1">{{ remaining_days }}</view>
						<view class="time2">天 </view>
					</view>
					<view class="twoDay">
						<view class="time1">{{ hours }}</view>
						<view class="time2">时</view>
					</view>
					<view class="threeDay">
						<view class="time1">{{ minutes }}</view>
						<view class="time2">分</view>
					</view>
					<view class="fourDay">
						<view class="time1">{{ seconds }}</view>
						<view class="time2">秒</view>
					</view>
				</view>
				<view class="" style="height: 60rpx;">
				</view>
			</view>
			<!-- 邀请码 v-if true  显示 v-if false 隐藏 -->
			<!-- v-if="is_whitelisted == true ? false : true" -->
			<view class="copyBox" v-if="is_whitelisted == true ? false : true">
				<view class="copyBox1" @click="open">
					<view class="flex ">
						<image src="/static/home/five.png" class="copy3" />
						<view class="copy1"> {{ $t('Bindinginvitationcode') }}</view>
					</view>
					<view class="copy2"> {{ $t('binding') }}</view>
				</view>
			</view>
			<!-- bannder -->
			<view class="flex" style="justify-content: center;margin: 30rpx;">
				<image class="flex-1" src="/static/home/kong.png" @click="goKong" style="height:180px;" />
				<view class="" style="width: 20rpx;"></view>
				<image class="flex-1" src="/static/home/inviteCode.png" @click="goInvaint" style="height:180px;" />
			</view>
			<u-gap height="10"></u-gap>
			<!-- 公开募集 -->
			<view class="" style="height:300rpx;margin: 0 30rpx;" @click="goPay">
				<view class="copyBoxBg">
					<view class="title" style="font-weight: bold;color: white;padding-top: 34rpx;padding-left: 30rpx;">
						{{ $t('publiclyraised') }}
					</view>
					<u-gap height="35"></u-gap>
					<view class="flex " style="margin: 0px 20px;">
						<l-circle strokeColor='#825CE0' :current.sync="model.all" :percent="(hasexchange * 100)" size='60px'>
							<!-- 				{{ Number(hasexchange * 100).toFixed(2) }}% -->
							<!-- {{Number(hasexchange).toFixed(2)}} -->
							<text style="color: #fff;font-size: 13px;">
								<!-- {{ hasexchange }} -->
								{{ (Number(hasexchange) * 100).toFixed(2) }}%
							</text>
						</l-circle>

						<view class="" style="display: flex;flex-direction: column;margin-left: 20rpx;justify-content: center;">
							<view class="" style="display: flex;">
								<view class="" style="color: white;font-weight: bold;margin-right: 10rpx;">
									{{ $t('exchange') }}
								</view>
								<view class="">
									<!-- <text style="color: #91DAFD;font-size: 12px;">NASY</text> -->
									<text style="color: #91DAFD;font-size: 14px;font-weight: bold;">{{ Redeemed || 0 }}</text>
								</view>
							</view>
							<view class="" style="display: flex;">
								<view class="" style="color: white;font-weight: bold;margin-right: 10rpx;">
									{{ $t('remaining') }}
								</view>
								<view class="">
									<!-- <text style="color: #91DAFD;font-size: 12px;">NASY</text> -->
									<text style="color: #91DAFD;font-size: 14px;font-weight: bold;">{{ model.remainingTokens || 0
									}}</text>
								</view>
							</view>
						</view>


					</view>
				</view>
			</view>
			<u-gap height="10"></u-gap>
			
<!-- 			<uni-card v-if="is_pledge" style="background-color: #000000;color: #fff;" :border="false">
				<template v-slot:title>
					<view class="flex"
						style="padding: 0 10px;margin-top: 10px;justify-content: space-between;margin-bottom: 10px;">
						<view style="font-size: 14px;color: #fff;font-weight: bold;">链上质押</view>
						<view @click="showRule" style="font-size: 14px;color: #fff;">质押规则</view>
					</view>
				</template>
				<button style="margin: 0;background-color: #093454;color: #fff;" size="default" type="default" @click="gopledge"
					:disabled="isButtonDisabled" :loading='isButtonDisabled'>质押</button>
			</uni-card> -->
			
			
			
			<!-- 邀请码 -->
			<view class="modelPopup">
				<uni-popup ref="popup" :mask-click="false" type="bottom" background-color="#fff">
					<view class="codeBox">
						<view class="code">{{ $t('Bindinginvitationcode') }}</view>
					</view>
					<view class="please">
						<input type="text" :placeholder="$t('Pleaseentertheinvitationcode')" v-model="inviteCode" />
					</view>
					<view class="mustBox">
						<view class="must">{{ $t('Othermobilephonesmustbeboundwithaninvitationcodetomine') }}</view>
					</view>
					<view class="submitBox" @click="invitationCodeConfirm">
						<view class="submit">{{ $t('confirmed') }}</view>
					</view>
					<view>
						<image src="/static/home/off.png" class="off" @click="off" />
					</view>
				</uni-popup>
			</view>
			<!-- 质押挖矿 -->
			<!-- <view class="flex" style="margin: 0px 16px;justify-content: space-between;align-items: center;">

				<view style="color: aliceblue;">质押规则</view>
			</view> -->
			
			<u-gap height="10"></u-gap>
			<!-- 系统公告 -->
			<!-- :content='content' -->
			<!-- <u-modal :show="showModel" :title="title" @confirm="showModel = false">
				<view class="slot-content">
					<p>尊敬的NASY用户我们很高兴的通知您，NASY基金已完成初步部署，将于2025年5月3号晚上20点08分构建代币流动性，届时您将可以通过手里的NASY代币根据代币价格实时变现。</p>
					<p>关于NASY手机自2025年5月3号，全网统一零售价格为1000U每台，可销售数量为1726台，售完即止。</p>
					<p>关于NASY挖矿码的销售自2025年5月3号全网恢复统一零售价999元每一个，其中500元用于市值管理，100元用于技术发展迭代，200元用于24策略委和108将的利润分配，剩余100元用作市场基本运营。</p>
					<p>NASY基金本着共创，共建，共赢的发展理念，同心同德与全体NASY家人共同推进NASY代币价格，共同发展NASY生态发展。</p>
				</view>
			</u-modal> -->

		</z-paging>



	</view>
</template>

<script>
import Decimal from 'decimal';
console.log(Decimal, 'Decimal');

import {
	setToken
} from '@/utils/auth.js'

import bs58 from "bs58"
import {
	MinerspledgeRecords,
	icoratio,
	login,
	getStagesInfo,
	getMiningRewards,
	bindInviteCode,
	getHoldersRewards,
	authDeeplink,
	MinerspledgeTransaction,
	Minerspledge
} from '@/api/index.js'

import { Connection, Transaction, PublicKey } from '@solana/web3.js'
// import { getAccount, getAssociatedTokenAddress } from "@solana/spl-token";

import env from '@/utils/env.js'
const NETWORK_URL = env.rpcURL

const mintAddress = env.mintAddress


const connection = new Connection(NETWORK_URL);

export default {
	methods: {
		
		
		// 查询质押记录
		async MinerspledgeRecordsApi(){
			console.log('MinerspledgeRecordsApi');
			let res = await Minerspledge()
			console.log(res,'res');
		},
		
		
		
		showRule() {
			uni.showToast({
				title: "每台新设备需要质押10个代币质押周期为180天",
				icon: "none"
			})
		},

		// 构建质押交易 
		async MinerspledgeTransactionApi() {
			this.isButtonDisabled = true
			let data = {
				"address": uni.getStorageSync('walletAddress'),
			}
			let res = await MinerspledgeTransaction(data)
			if (res.code == 200) {
				let serializedTransaction = res.data.serializedTransaction.data
				if (serializedTransaction) {
					console.log('发送广播');
					const txBuffer = new Uint8Array(serializedTransaction);
					const transaction = Transaction.from(txBuffer);
					// const { signature } = await window.solana.signAndSendTransaction(transaction);
					let signature = ''
					let signAndSendTransaction = {
						signature: ''
					}
					try {
						signAndSendTransaction = await window.solana.signAndSendTransaction(transaction);
					} catch (e) {
						// console.log('e', e);
						this.isButtonDisabled = false
						uni.showToast({
							title: '拒绝交易',
							icon: "error"
						})
						return;
					}
					signature = signAndSendTransaction.signature
					console.log("交易签名:", signature);
					// 等待确认
					try {
						const latestBlockhash = await connection.getLatestBlockhash();
						// const confirmation = await connection.confirmTransaction(signature, 'confirmed')
						const confirmation = await connection.confirmTransaction({
							signature,
							blockhash: latestBlockhash.blockhash,
							lastValidBlockHeight: latestBlockhash.lastValidBlockHeight
						}, 'confirmed');
						console.log(confirmation, 'confirmation');
						console.log(confirmation.value, 'confirmation.value');
						if (confirmation.value.err) {
							console.log('交易确认失败');
							this.isButtonDisabled = false
							uni.showToast({
								title: '交易不合法',
								icon: "error"
							})
							throw new Error('交易确认失败')
							return;
						}
						if (signature) {
							console.log('signature 交易存在', signature);
							this.signature = signature
							/* 保存记录 */
							this.MinerspledgeApi()
						}
					} catch (err) {
						this.isButtonDisabled = false
						uni.showToast({
							title: '网络错误,请更换节点',
							icon: 'none'
						})
						console.log('err network', err);
					}
				}
			} else {
				this.isButtonDisabled = false
			}
		},
		// 保存质押交易 
		async MinerspledgeApi() {
			let that = this;
			let walletAddress = uni.getStorageSync('walletAddress')
			let data = {
				"address": walletAddress,
				"hx": this.signature
			}
			let res = await Minerspledge(data)
			console.log(res, 'res');
			if (res.code == 200) {
				uni.showToast({
					title: '质押成功',
					icon: 'none'
				})
				this.isButtonDisabled = false
				setTimeout(()=>{
					 that.getMiningRewardsApi()
				},3000)
				//
			}
		},
		/* 去质押 */
		gopledge() {
			let that = this;
			uni.showModal({
				title: '质押',
				content: '确定要质押吗?',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						that.MinerspledgeTransactionApi()
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		/* 持币排行 */
		rewardRecordHandle() {
			uni.navigateTo({
				url: "/pages/rewardRecord/index"
			})
		},
		/* 中英文切换 */
		changelanguage() {
			let that = this
			uni.showActionSheet({
				itemList: ['中文', 'English'],
				success: function (res) {
					console.log(res, 'res');
					// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					if (res.tapIndex == 0) {
						console.log('中文');
						that.$i18n.locale = 'zh-Hans'
						uni.setLocale('zh-Hans')
					} else if (res.tapIndex == 1) {
						console.log('英文');
						that.$i18n.locale = 'en'
						uni.setLocale('en')
					}
				},
				fail: function (res) {
					console.log(res.errMsg);
				}
			});
		},
		/* 刷新 */
		getList() {
			// 
			this.getStagesInfoApi()
			this.getMiningRewardsApi()
			this.getHoldersRewardsApi()
			// 获取兑换
			this.icoratioApi()
			this.$refs.paging.complete([]);
		},
		// 我的
		goUserInfo() {
			console.log('goUserInfo');
			uni.navigateTo({
				url: '/pages/claim/claim'
			})
		},
		// 奖励记录
		rewardRecord() {
			uni.navigateTo({
				url: "/pages/rewardRecord/index"
			});
		},
		// 释放奖励
		releaseRecord() {
			uni.navigateTo({
				url: "/pages/releaseRecord/releaseRecord"
			});
		},
		// 空投
		goKong() {
			let airdrop = this.airdrop
			uni.navigateTo({
				url: `/pages/webView/webView?data=${airdrop}`
			})
		},
		// 邀请码
		goInvaint() {
			console.log('goInvaint');
			uni.navigateTo({
				url: '/pages/invited/invited'
			})
		},
		// IPC
		goPay() {
			/*  */
			uni.navigateTo({
				url: '/pages/icu/icu'
			})
		},
		// 环形图
		async icoratioApi() {
			// console.log('icoratioApi handle');
			let res = await icoratio()
			if (res.code == 200) {
				// console.log(res,' icoratio api');
				this.model = res.data
				// this.model.all = 100;
				this.modelVale = Number(this.model.all) - Number(this.model.remainingTokens);

				// console.log(this.modelVale,'this.modelVale');
				// console.log(this.model.all,'this.modelVale');
				// this.hasexchange = Number(this.modelVale) / Number(this.model.all)
				let result = Number(this.modelVale) / Number(this.model.all)
				// let result = 1998471 / Number(this.model.all)
				this.hasexchange = result.toFixed(25)
				// this.hasexchange = result
				// console.log(this.hasexchange,'this.hasexchange');
				this.Redeemed = Number(this.model.all) - Number(this.model.remainingTokens)
			}
		},
		// rpc 查询我的资产
		async getSolBalance() {
			let walletAddress = uni.getStorageSync('walletAddress')
			// Main nasy
			try {
				const tokenAccounts = await connection.getParsedTokenAccountsByOwner(
					new PublicKey(walletAddress), {
					mint: new PublicKey(mintAddress)
				}
				);
				if (tokenAccounts.value.length === 0) {
					console.log("未找到该 token 的账户");
					return 0;
				}
				const amount = tokenAccounts.value[0].account.data.parsed.info.tokenAmount;
				const balance = amount.uiAmount;
				this.solLimit = balance
				console.log(`Token 余额: ${balance}`);
				// this.balance = balance
				// return balance;
			} catch (err) {
				console.error("查询 SPL Token 余额失败:", err);
				return 0;
			}
		},
		isString(value) {
			return typeof value === 'string';
		},
		hideMony() {
			if (!this.publicKey) return
			this.hideMonyShow = !this.hideMonyShow
			// this.getSolBalance()
			this.getMiningRewardsApi()
			if (this.hideMonyShow == true) {
				this.getSolBalance()
			}
		},
		formatTime(unit) {
			return unit < 10 ? '0' + unit : unit;
		},
		startRewardTimer() {
			clearInterval(this.intervalId); // 清除定时器
			this.intervalId = null;
			// 设置目标时间
			const targetDate = new Date('2025-05-01T00:00:00');
			// const targetDate = new Date('2025-04-23T16:39:00');
			// 每隔 5 秒调用一次 getMiningRewardsApi
			this.intervalId = setInterval(() => {
				/* 自己设置一个倒计时时间 */
				/* 距离5月1日挖矿倒计时 */
				// 获取当前时间
				const now = new Date();
				// 计算剩余时间
				const remainingTime = targetDate - now;
				// 计算天数、小时数、分钟数和秒数
				const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
				const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
				const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
				// console.log(seconds, 'seconds');
				/* 到时间了 */
				if (seconds <= 0 && days <= 0 & hours <= 0 && minutes <= 0) {
					this.remaining_time = null
					clearInterval(this.intervalId); // 清除定时器
					this.intervalId = null;
					return
				}
				/*  */
				this.remaining_days = days
				this.hours = hours
				this.minutes = minutes
				this.seconds = seconds
			}, 1000); // 5000 毫秒 = 5 秒

			// }, 2000); // 5000 毫秒 = 5 秒
			// }, 5000); // 5000 毫秒 = 5 秒

		},
		stopRewardTimer() {
			clearInterval(this.intervalId); // 清除定时器
			this.intervalId = null;
		},
		// 持币奖励
		async getHoldersRewardsApi() {
			let address = uni.getStorageSync('walletAddress')
			let res = await getHoldersRewards(address)
			if (res.code == 200) {
				this.holdRewards.totalHolderReward = res.data.totalHolderReward
				this.holdRewards.perSecondReward = res.data.perSecondReward
				this.holdRewards.earnedRewards = res.data.earnedRewards
				this.holdRewards.pendingRewards = res.data.pendingRewards
				this.holdRewards.rank = res.data.rank
				this.holdRewards.differencePercentage = res.data.differencePercentage
			} else {
				// this.holdRewards.totalHolderReward = 4242
				// this.holdRewards.perSecondReward = 299
				// this.holdRewards.earnedRewards = 300
				// this.holdRewards.pendingRewards = 100
				// this.holdRewards.rank = 1
				// this.holdRewards.differencePercentage = 2131
			}
		},
		// 计算挖矿算力奖励
		async getMiningRewardsApi() {
			let data = {
				"address": uni.getStorageSync('walletAddress')
			}
			let res = await getMiningRewards(data)
			console.log(res, 'res getMiningRewards');
			if (res.code == 200) {
				// this.solLimit = res.data.balance
				this.earnedRewards = res.data.earnedRewards
				this.pendingRewards = res.data.pendingRewards
				this.perSecondReward = res.data.perSecondReward
				this.totalMiningReward = res.data.totalMiningReward
				this.is_whitelisted = res.data.is_whitelisted
				this.is_pledge = res.data.is_pledge
				// console.log(this.earnedRewards, 'this.earnedRewards');
			} else {
				console.log('this.is_whitelisted else');
				this.earnedRewards = '----'
				this.pendingRewards = '----'
				this.earnedRewards = '----'
				this.earnedRewards = '----'
				this.is_whitelisted = false
				this.is_pledge = false
			}
		},
		// 查询阶段信息 
		async getStagesInfoApi() {
			let res = await getStagesInfo()
			if (res.code == 200) {
				this.current_stage_number = res.data.current_stage_number
				this.airdrop = res.data.airdrop
				if (res.data.remaining_time == null) {
					this.remaining_time = null
					return
				}
				this.remaining_time = res.data.remaining_time
			}
		},
		// 获取当前的 Solana 钱包实例
		getSolana() {
			if (!window.solana?.isPhantom) {
				// alert("请安装 Phantom Wallet!");
				return null;
			}
			return window.solana;
		},
		// 确认邀请接口
		async bindInviteCodeApi() {
			let that = this;
			const response = await bindInviteCode({
				"address": uni.getStorageSync('walletAddress'),
				"inviteCode": this.inviteCode
			});
			if (response.code == 400) {
				uni.showToast({
					title: response.message,
					icon: 'none'
				})
			}
			if (response.code == 200) {
				uni.showToast({
					title: '绑定成功',
					icon: 'none'
				})
				setTimeout(() => {
					that.getMiningRewardsApi()
				}, 3500)
			}
			console.log('12312', response);
		},
		// 确认邀请
		invitationCodeConfirm() {
			console.log('invitationCodeConfirm');
			if (this.inviteCode == '') {
				uni.showToast({
					title: '请输入邀请码',
					icon: 'none'
				})
				return
			}
			if (this.inviteCode) {
				this.bindInviteCodeApi()
			}
			this.off()
		},
		off() {
			console.log('关闭弹框');
			this.$refs.popup.close();
		},
		open() {
			console.log('open');
			this.inviteCode = ''
			this.$refs.popup.open("center");
		},
		togglePopup() {
			return
			this.popupVisible = !this.popupVisible;
		},
		whitePopup() {
			this.popupVisible = false;
		},
		// 方法用于格式化 publicKey 的显示
		formatPublicKey(key) {
			if (!key) return "";
			const start = key.slice(0, 6);
			const end = key.slice(-6);
			return `${start}...${end}`;
		},
		// 连接钱包
		ConnectYourWallet() {
			this.ConnectYourWalletByH5()
		},
		// 连接钱包 获取 签名 并且登录
		async ConnectYourWalletByH5() {
			const resp = await window.solana.connect();
			const walletAddress = resp.publicKey.toBase58()
			uni.setStorageSync('walletAddress', walletAddress)
			this.publicKey = resp.publicKey.toString();
			// 2. 使用时间戳作为 nonce
			const nonce = Date.now().toString();
			this.nonce = nonce
			// 3. 对 nonce 进行签名
			const encodedMessage = new TextEncoder().encode(nonce);
			const {
				signature
			} = await window.solana.signMessage(encodedMessage, "utf8");
			// 4. 转换为 Base58 便于传输
			const signatureBase58 = bs58.encode(signature);
			let data = {
				address: this.publicKey,
				nonce,
				signature: signatureBase58
			}
			await this.loginApi(data);
		},
		// 登录接口
		async loginApi({
			address,
			nonce,
			signature
		}) {
			console.log('loginApiloginApiloginApi');
			let getDeviceInfo = uni.getDeviceInfo()
			console.log(getDeviceInfo.deviceId, 'getDeviceInfo.deviceId');
			let data = null
			data = {
				address,
				nonce,
				signature,
				code: getDeviceInfo.deviceId
			};
			// console.log(data, 'login data');
			// 请求登录接口
			try {
				const response = await login(data); // 你的登录API方法
				if (response.data) {
					uni.setStorageSync('walletAddress', this.publicKey);
					uni.showToast({
						title: "钱包连接成功",
						icon: "success",
						duration: 2000,
					});
					setToken(response.data.token)
					// 持币奖励
					this.getHoldersRewardsApi()
					// 阶段
					this.getStagesInfoApi()
					// 开启定时其
					this.startRewardTimer()
					// 显示余额
					this.hideMony()
					// 获取兑换
					this.icoratioApi()
				}
				// 进一步处理登录成功的响应，例如保存 token 或跳转等
			} catch (error) {
				console.error("登录失败:", error);
			}
		},
		// 检查钱包是否已连接
		async checkWalletConnection() {
			const solana = this.getSolana();
			if (solana.isConnected) {
				try {
					// console.log(solana, "solana");
					// console.log(solana.publicKey.toString(), "solana");
					this.publicKey = solana.publicKey.toString();
					console.log("已连接钱包，公钥:", this.publicKey);
				} catch (error) {
					console.error("获取公钥失败:", error);
					throw error
				}
			} else {
				uni.showToast({
					title: '请链接钱包',
					icon: "none"
				})
				console.log('没有链接钱包');
			}
		},
	},
	onShow() {
		
		this.MinerspledgeRecordsApi()
		console.log('onshow page');
		// #ifdef H5
		window.solana?.on('connect', () => {
			{
				this.publicKey = window.solana.publicKey.toString();
				console.log('更新 publicKey');
			}
		});
		// 判断 Phantom Wallet 是否存在
		if (!window.solana || !window.solana.isPhantom) {
			alert("请安装 Phantom Wallet!");
			console.log('提示安装插件');
			window.open("https://phantom.app/", "_blank");
		} else {
			console.log('检查练级');
			this.checkWalletConnection();
		}
		// #endif
		// #ifdef H5
		if (uni.getStorageSync('walletAddress')) {
			// this.getStagesInfoApi()
			// this.getHoldersRewardsApi()
			// this.getMiningRewardsApi()
			// this.icoratioApi()
		}
		// #endif
		/*  */
		// this.startRewardTimer()
	},
	onHide() {
		this.stopRewardTimer();
	},
	onUnload() {
		// 页面卸载时清除定时器
		console.log('onUnload');
		this.stopRewardTimer();
	},

	// 距离上一名比例
	computed: {
		// 通过计算属性返回包含 CSS 变量的样式对象
		customStyles() {
			return {
				'--difference-percentage': `${this.holdRewards.differencePercentage}%` // 设置 CSS 变量
				// '--difference-percentage': `50%` // 设置 CSS 变量
			};
		},
		// 一阶段 50% 二阶段 100%
		customStageStyles() {
			if (this.current_stage_number == 1) {
				return {
					'--stage-percentage': '50%' // 设置 CSS 变量
				};
			} else if (this.current_stage_number == 2) {
				return {
					'--stage-percentage': '100%' // 设置 CSS 变量
				};
			}
		},
	},
	data() {
		return {
			signature: "", //质押签名
			isButtonDisabled: false,// 质押按钮
			showModel: true,
			title: '系统公告',
			/*  */
			// 1000 total 
			// 99 剩余
			// 已兑换 1000-99
			list: [],
			is_whitelisted: true, // 是否显示邀请码
			is_pledge: true, // 是否显示质押
			model: {
				"icoPDA": "",
				"programId": "",
				"all": 0,
				"tokenPrice": "",
				"solReceiver": "",
				"remainingTokens": 0,
				"mint": "",
				"contractTokenAccount": "",
				"userTokenAccount": ""
			},
			/* 环形图 */
			modelVale: 0,
			target: 50,
			/* 已经兑换 */
			hasexchange: 0,
			Redeemed: 0,
			// 轮播
			bannerList: [
				'/static/home/banner.png',
				'/static/home/banner.png'
			],
			// publicKey: uni.getStorageSync('publicKey'),
			publicKey: '',
			signature: null, // 签名
			nonce: null, // 随机数
			popupVisible: false,
			inviteCode: '', // 邀请码
			// 校验状态
			verificationResult: null,
			// sol余额
			solLimit: 0,
			// 阶段数 当前处于第一个阶段，剩余的时间是 23 天。
			current_stage_number: 0,
			remaining_days: 0,
			airdrop: "",
			// 时间
			remaining_time: null,
			hours: 0,
			minutes: 0,
			seconds: 0,
			//  计算挖矿
			earnedRewards: "----",
			pendingRewards: "----",
			perSecondReward: "----",
			totalMiningReward: "----",
			// 
			hideMonyShow: false,
			intervalId: null, // 用来存储定时器 ID
			// 持有币奖励
			holdRewards: {
				"totalHolderReward": "",
				"perSecondReward": "",
				"earnedRewards": "",
				"pendingRewards": "",
				"rank": "0",
				"differencePercentage": ""
			}
		};
	}
};
</script>

<style scoped lang="scss">
::v-deep .uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title {
	color: #fff;
	font-weight: bold;
}



/* 24262B */
::v-deep .u-modal__title {
	color: #fff;
}

::v-deep .u-popup__content {
	background-color: #24262B;

	p {
		color: white;
	}
}

.copyBoxBg {
	width: 100%;
	height: 100%;
	background-image: url('/static/home/bg.png');
	background-size: cover;
	/* 图片自适应填充 */
	background-position: center center;
	/* 图片居中 */
	background-repeat: no-repeat;
	/* 不重复 */
}


.animated {
	// animation-duration: 2s;
	animation: zoomInOut 2s infinite;
	/* 循环动画 */
}

@keyframes zoomInOut {
	0% {
		transform: scale(1);
		/* 初始大小 */
	}

	50% {
		transform: scale(1.5);
		/* 放大到1.5倍 */
	}

	100% {
		transform: scale(1);
		/* 恢复原始大小 */
	}
}


.off {
	width: 60rpx;
	height: 60rpx;
	margin-left: 315rpx;
	margin-top: 100rpx;
}

.submitBox {
	width: 600rpx;
	height: 88rpx;
	background: #fcd434;
	border-radius: 44rpx;
	text-align: center;
	line-height: 88rpx;
	margin-left: 45rpx;
	margin-top: 99rpx;

	.submit {
		font-weight: bold;
		font-size: 36rpx;
		color: #0d081a;
	}
}

.mustBox {
	margin-left: 31rpx;
	margin-top: 22rpx;

	.must {
		font-size: 24rpx;
		color: #999999;
	}
}

.please {
	width: 630rpx;
	height: 109rpx;
	background: #1f2630;
	border-radius: 30rpx;
	border: 1px solid #6c7680;
	margin-left: 30rpx;
	margin-top: 80rpx;

	input {
		font-size: 24rpx;
		color: #999999;
		margin-left: 32rpx;
		margin-top: 40rpx;
	}
}

.codeBox {
	margin-top: 39rpx;

	.code {
		font-weight: 500;
		font-size: 36rpx;
		color: #ffffff;
		text-align: center;
	}
}

::v-deep .uni-popup .uni-popup__wrapper {
	border-radius: 10px !important;
	background-color: #29313c !important;
	width: 695rpx;
	height: 600rpx;
}

.boxSix {
	// width: 690rpx;
	// height: 577rpx;
	// background-image: url("/static//home/blue.png");
	background-color: #2A58FF;
	height: 320rpx;
	border-radius: 30rpx;
	background-size: 100%;
	margin: 30rpx;
	position: relative;

	.earnings {
		font-weight: 400;
		font-size: 36rpx;
		color: #ffffff;
		margin-left: 30rpx;
		padding-top: 30rpx;
	}

	.whitePic {
		// width: 268rpx;
		// height: 255rpx;

		width: 188rpx;
		height: 165rpx;
		position: absolute;
		top: 5%;
		right: 10%;
		z-index: 1;
	}

	.dayBox {
		position: absolute;
		z-index: 22;
		display: flex;
		align-items: center;
		// margin-top: 60rpx;
		margin-top: 70rpx;

		.day {
			margin-left: 57rpx;
			text-align: center;

			.math1 {
				font-weight: bold;
				font-size: 60rpx;
				color: #ffffff;
			}

			.math2 {
				font-weight: 400;
				font-size: 30rpx;
				color: #ffffff;
				z-index: 33;
			}
		}

		.day2 {
			margin-left: 100rpx;
			text-align: center;

			.math3 {
				font-weight: bold;
				font-size: 60rpx;
				color: #ffffff;
				z-index: 33;
			}

			.math4 {
				font-weight: 400;
				font-size: 30rpx;
				color: #ffffff;
			}
		}
	}

	.blueBox {
		display: flex;
		align-items: center;

		.oneDay {
			width: 120rpx;
			height: 130rpx;
			border-radius: 30rpx;
			border: 1px solid #738eff;
			text-align: center;
			margin-left: 45rpx;
			margin-top: 63rpx;

			.time1 {
				font-weight: bold;
				font-size: 72rpx;
				color: #ffffff;
			}

			.time2 {
				font-weight: 300;
				font-size: 24rpx;
				color: #ffffff;
			}
		}

		.twoDay {
			width: 120rpx;
			height: 130rpx;
			border-radius: 30rpx;
			border: 1px solid #738eff;
			text-align: center;
			margin-left: 42rpx;
			margin-top: 63rpx;

			.time1 {
				font-weight: bold;
				font-size: 72rpx;
				color: #ffffff;
			}

			.time2 {
				font-weight: 300;
				font-size: 24rpx;
				color: #ffffff;
			}
		}

		.threeDay {
			width: 120rpx;
			height: 130rpx;
			border-radius: 30rpx;
			border: 1px solid #738eff;
			text-align: center;
			margin-left: 42rpx;
			margin-top: 63rpx;

			.time1 {
				font-weight: bold;
				font-size: 72rpx;
				color: #ffffff;
			}

			.time2 {
				font-weight: 300;
				font-size: 24rpx;
				color: #ffffff;
			}
		}

		.fourDay {
			width: 120rpx;
			height: 130rpx;
			border-radius: 30rpx;
			border: 1px solid #738eff;
			text-align: center;
			margin-left: 40rpx;
			margin-top: 63rpx;

			.time1 {
				font-weight: bold;
				font-size: 72rpx;
				color: #ffffff;
			}

			.time2 {
				font-weight: 300;
				font-size: 24rpx;
				color: #ffffff;
			}
		}
	}

	.intoBox {
		width: 580rpx;
		height: 8rpx;
		// background: #59cf6f;
		// background: red;
		// background: linear-gradient(to right, #7EDB6A 50%, #001EAE 50%);
		background: linear-gradient(to right, #7EDB6A var(--stage-percentage), #001EAE 0%);

		border-radius: 4rpx;
		margin: 0 auto;
		position: relative;

		.chestBlue {
			position: absolute;
			top: -300%;
			left: 40%;
			width: 68rpx;
			height: 58rpx;
		}

		.chestRed {
			position: absolute;
			top: -350%;
			left: 90%;
			width: 75rpx;
			height: 61rpx;
		}
	}
}

.copyBox {
	padding-bottom: 20rpx;
}

.copyBox1 {
	width: 690rpx;
	height: 88rpx;
	background: #1f2630;
	border-radius: 44rpx;
	border: 1px solid #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30rpx;

	.copy1 {
		font-weight: 300;
		font-size: 30rpx;
		color: #ffffff;
		margin-left: 20rpx;
	}

	.copy2 {
		border-radius: 44rpx;
		height: 88rpx;
		width: 200rpx;
		text-align: center;
		line-height: 88rpx;
		background-color: #1F1F1F;
		font-weight: bold;
		font-size: 32rpx;
		color: #ffffff;
		// margin-right: 70rpx;
	}

	.copy3 {
		width: 29rpx;
		height: 36rpx;
		margin-left: 30rpx;
	}
}

.boxFive {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 30rpx;

	.force {
		font-weight: 400;
		font-size: 36rpx;
		color: #ffffff;
		margin-left: 30rpx;
	}

	.force1 {
		font-weight: 300;
		font-size: 24rpx;
		color: #ffffff;
		margin-right: 30rpx;
	}
}

.progress-container {
	width: 120rpx;
	flex: 1;
	height: 8rpx;
	// background-color: #df750b;
	background: linear-gradient(to right, #E2770D var(--difference-percentage), #2B323D 0%);
	// background-color: hsl(var(--difference-percentage), 100%, 50%);
	/* 背景颜色基于差异百分比 */

	/* 渐变背景，左半部分是绿色，右半部分是橙色 */
	border-radius: 25px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

	// margin-left: 20rpx;
	// margin-top: 20rpx;
}

.boxFour {
	// width: 690rpx;
	height: 141rpx;
	background: #1f2630;
	border-radius: 30rpx;
	border: 1px solid #ffffff;
	// margin-left: 30rpx;
	// margin-top: 22rpx;
	// margin: 30rpx;
	margin: 20rpx 20rpx;
	// padding: 0 20rpx;
	padding-right: 20rpx;

	.fourLeft {
		display: flex;
		font-weight: 300;
		font-size: 24rpx;
		color: #999999;
		margin-top: 22rpx;
		text-align: center;
		// margin-left: 30rpx;

		.fourOne {
			flex: 1;
		}

		.fourTwo {
			flex: 1;
			// width: ;
			// margin-left: 58rpx;
		}

		.fourThree {
			flex: 1;
			// width: ;
			// margin-left: 74rpx;
		}

		.fourPut {
			flex: 1;
			// width: ;
			// margin-left: 70rpx;
		}

		.fourFive {
			flex: 1;
			// margin-left: 50rpx;
		}
	}

	.fourRight {
		display: flex;
		font-weight: 300;
		// font-size: 36rpx;
		font-size: 30rpx;
		color: #ffffff;

		// margin-left: 20rpx;
		// justify-content: space-around;
		// width: 640rpx;
		// margin: 0 auto;
		.fourOne {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;

			// width: 90rpx;
			image {
				width: 68rpx;
				height: 43rpx;
			}
		}

		.fourTwo {
			text-align: center;
			flex: 1;
			// width: 30%;
			// width: 92rpx;
			// margin-left: 30rpx;
		}

		.fourThree {
			flex: 1;
			// width: 30%;
			text-align: center;
			// width: 92rpx;
			// margin-left: 25rpx;
		}

		.fourPut {
			flex: 1;
			// width: 30%;
			text-align: center;
			// width: 92rpx;
			// margin-left: 25rpx;
		}

		.fourFive {
			flex: 1;
			// width: 20%;
			// margin-left: 50rpx;
		}
	}
}

.boxThree {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10rpx;

	.Rewards {
		font-weight: 400;
		font-size: 36rpx;
		color: #ffffff;
		margin-left: 30rpx;
	}

	.Rewards1 {
		font-weight: 300;
		font-size: 24rpx;
		color: #ffffff;
		margin-right: 30rpx;
	}
}

.boxTwo {
	display: flex;
	align-items: center;

	.zeroBox {
		margin-left: 30rpx;

		.zero {
			font-weight: bold;
			font-size: 72rpx;
			color: #ffffff;
		}
	}

	.zero1 {
		display: flex;
		align-items: center;
		margin-left: 114rpx;

		.c {
			font-weight: 300;
			font-size: 24rpx;
			color: #ffffff;
		}

		.down1 {
			width: 10rpx;
			height: 10rpx;
			margin-left: 10rpx;
		}
	}
}

.content {
	width: 100vw;
	min-height: 100vh;
	background: #1f2630;
}

.headerBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	// margin: 30rpx;
	margin: 20rpx;
	// padding-top: 40rpx;
}

.leftBox {
	display: flex;
	align-items: center;
	// margin-left: 16rpx;
}

.oneImage {
	width: 129rpx;
	height: 129rpx;
}

.hello {
	font-weight: 800;
	font-size: 36rpx;
	color: #ffffff;
	line-height: 64rpx;
}

.rightBox {
	// width: 270rpx;
	padding: 0 20rpx;
	// width: 260rpx;
	height: 80rpx;
	background: rgba(108, 118, 128, 0);
	border-radius: 40rpx;
	border: 1px solid #ffffff;
	// margin-left: 144rpx;
	// margin-left: 133rpx;
}

.address {
	font-weight: 300;
	font-size: 24rpx;
	color: #ffffff;
	line-height: 80rpx;
	text-align: center;
	// margin-left: 60rpx;
	// margin-left: 20rpx;
}

.lang {
	display: flex;
	align-items: center;
	// 
	justify-content: space-around;
}

.addressBox {
	display: flex;
	align-items: center;
	position: relative;
}

.swystem {
	display: flex;
	align-items: center;
}

.address1 {
	font-weight: 400;
	font-size: 24rpx;
	color: #ffffff;
	line-height: 64rpx;
	margin-left: 13rpx;
}

.twoImage {
	width: 17rpx;
	height: 9rpx;
	margin-left: 10rpx;
}

.swystemBox {
	// width: 690rpx;
	height: 80rpx;
	background: #1f2630;
	border-radius: 40rpx;
	border: 1px solid #ffffff;
	margin: 30rpx;
	// margin-top: 25rpx;
	// margin-left: 30rpx;
}

.threeImage {
	width: 36rpx;
	height: 32rpx;
	margin-left: 30rpx;
}

.swystem1 {
	font-weight: 500;
	font-size: 30rpx;
	color: #fcd434;
	line-height: 70rpx;
	margin-left: 15rpx;
}

.popup {

	width: 135px;
	height: 133px;
	position: absolute;
	top: 130%;
	left: -185%;
	right: 0%;
	bottom: 0;

	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9;
}

.popup-content {
	width: 270rpx;
	// height: 267rpx;
	// height: 187rpx;
	height: 167rpx;
	background: #1f2630;
	border-radius: 10rpx;
	border: 1px solid #ffffff;
	border-radius: 5px;
	text-align: center;
}

.language-option {
	margin: 10px 0;
	cursor: pointer;
}

.language-option:hover {
	color: #6495ed;
}

.china {
	font-weight: 300;
	font-size: 30rpx;
	color: #ffffff;
	line-height: 64rpx;
	margin-top: 30rpx;
}

.en {
	font-weight: 300;
	font-size: 30rpx;
	color: #ffffff;
	line-height: 64rpx;
}

.langOne {
	font-weight: 300;
	font-size: 30rpx;
	color: #ffffff;
	line-height: 64rpx;
}

.banner1 {
	width: 690rpx;
	height: 375rpx;
	margin: 30rpx;
}

.myBox {
	display: flex;
	align-items: center;
	margin-left: 30rpx;

	.my {
		font-weight: 300;
		font-size: 36rpx;
		color: #ffffff;
	}

	.eyes {
		width: 35rpx;
		height: 26rpx;
		margin-left: 30rpx;
	}
}
</style>